<template>
  <div class="page-login">
    <div class="page-login-header">
      <van-icon name="arrow-left" @click="onDemo" />
    </div>
    <div class="page-login-body">
      <div class="page-login-center">
        <div class="page-login-logo">
          <div class="logo-image">
            <van-image
              round
              width="60px"
              height="60px"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </div>
          <div class="logo-name"><span>学习先生</span></div>
        </div>
        <div class="center-put">
          <van-form @failed="onFailed">
            <van-cell-group inset>
              <van-field
                v-model="value"
                label="+86"
                name="pattern"
                placeholder="请输入手机号"
                :rules="[{ pattern, message: '请输入正确内容' }]"
              />
              <!-- 通过 validator 进行函数校验 -->
            </van-cell-group>
            <div style="margin: 16px">
              <van-button
                round
                block
                type="warning"
                native-type="submit"
                @click="onlogin"
              >
                获取验证码
              </van-button>
            </div>
          </van-form>
        </div>
        <van-checkbox v-model="checked" shape="square">
            我已阅读并同意<span class="th">服务使用协议</span>和<span class="th">隐私政策</span>
        </van-checkbox>
        <van-divider>选择其他登录方式</van-divider>
        <div class="center-icon">
          <van-icon name="wechat" />
          <van-icon name="qq" />
          <van-icon name="weibo" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default { name: "logon" };
</script>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const value= ref("");
const pattern = /\d{11}/;
const checked = ref(false);

const onFailed = (errorInfo) => {
};
const router=useRouter()
 function onlogin(){
  router.push("/home/commend")
 }
 function onDemo(){
  router.push("/login/demo")
 }
</script>
<style lang="scss" scoped>
.page-login {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  &-header {
    width: 100%;
    height: 200px;
    background: url(../image/R-C.png) no-repeat;
    background-size: 100% 200px;
    border: 1px solid #fff;
    .van-icon{
      margin: 10px;
      font-size: 20px;
    }
  }
  &-body {
    flex: 1;
    height: 100%;
    width: 100%;
    position: relative;
  }
  &-center {
    margin-top: -50px;
    margin-left: 26px;
    height: 450px;
    width: 320px;
    border: 1px solid #9999;
    border-radius: 50px;
    background-color: #fff;
  }
  &-logo {
    display: flex;
    height: 100px;
    width: 100%;
    color: orange;
    padding: 10px 20px;
  }
  .logo-image {
    width: 100px;
    height: 100px;
    text-align: center;
  }
  .logo-name {
    flex: 1;
    line-height: 60px;
    font-weight: bold;
    font-size: 20px;
  }
  .van-cell-group {
    border: 1px #666 solid;
  }
  .center-put {
    margin-top: 20px;
  }
  .van-button {
    margin: 10px 20px;
    width: 88%;
    border-radius: 25px;
  }
  .van-divider {
    margin-top: 30px;
  }
  .van-checkbox{
    font-size: 10px;
    margin: 10px 20px 0 20px;
    .th{
      color: blue;
    }
  }
  .center-icon {
    font-size: 50px;
    text-align: center;
    .van-icon {
      margin: 10px;
    }
  }
}
</style>
